<template>
	<view>
		<view class="content">
			<view class="tit">转会原因</view>
			<view class="textarea">
				<textarea v-model="params.reason" maxlength="180" placeholder-class="input_text_s" placeholder="请输入您的转会原因"></textarea>
				<view class="ts">{{ params.reason.length }}/180</view>
			</view>
		</view>
		<view class="inputs flex_jc_sb">
			<view class="t1">分社长ID</view>
			<view class="">
				<input v-model="params.groupUserId" type="number" placeholder="填写新社长ID" placeholder-class="input_text_s" />
			</view>
		</view>
		<view class="inputs flex_jc_sb">
			<view class="t1">分社长昵称</view>
			<view class="">
				<input v-model="params.groupUserName" type="text" placeholder="填写新社长昵称" placeholder-class="input_text_s" />
			</view>
		</view>
		<view class="bottom_btns">
			<view class="cont">
				<view class="onebtns" :class="btnactive ? 'active' : ''" @click="submitComment">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { groupChangeApply } from '@/api/about.js';

const params = reactive({
	reason: '', // 原因
	groupUserId: '', // 社长ID
	groupUserName: '' // 社长昵称
});
const btnactive = ref(false);
watch(
	() => [params.reason.trim(), params.groupUserId.trim(), params.groupUserName.trim()],
	([reason, userId, userName]) => {
		// 三个值均不为空时，按钮激活
		btnactive.value = reason !== '' && userId !== '' && userName !== '';
	},
	{ deep: true } // 深度监听对象内部属性变化
);

const submitComment = () => {
	if (!btnactive.value) return; // 未激活时禁止提交
	groupChangeApply({
		reason: params.reason.trim(),
		groupUserId: params.groupUserId.trim(),
		groupUserName: params.groupUserName.trim()
	}).then((res) => {
		if (res.code === 200) {
			setTimeout(() => uni.navigateBack(), 500);
		}
	});
};
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.content {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	.textarea {
		textarea {
			width: 100%;
			height: 180rpx;
			margin: 15rpx auto;
			font-size: 28rpx;
			color: #1b1b1b;
		}
		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #aeaeac;
			text-align: right;
		}
	}
}
.inputs {
	width: 710rpx;
	height: 80rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 0rpx 20rpx;
	margin: 20rpx auto;
	box-sizing: border-box;
	.t1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	input {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #1b1b1b;
		text-align: right;
	}
}
</style>